<template>
	<view class="">
		<view class="placeholder">
		</view>
		<view class="pagination-frame">
			<view class="up btn-page" @click="up">
				上一页
			</view>
			<view class="page">
				1 / 10
			</view>
			<view class="next btn-page" @click="next">
				下一页
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			up() {
				this.emit()
			},
			next() {
				this.emit()
			},
			emit() {
				this.$emit('change')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagination-frame {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		background-color: #333;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 0 3px -1px #fff;
		.page {
			color: #fff;
			font-size: 14px;
		}
		.btn-page {
			font-size: 14px;
			width: 30%;
			height: 60%;
			background-color: #3c9cff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			color: #fff;
		}
	}
	.placeholder {
		height: calc(env(safe-area-inset-bottom) + 50px);
	}
</style>
